<script setup lang="ts">
import {ref, defineProps, type Ref, onMounted, watch} from 'vue';
import {type IUCarShop} from '@/types'

const Props = defineProps<{ shopData: IUCarShop }>()

const shopData = ref(Props.shopData)
</script>

<template>
    <ul>
        <li><input @click="" type="checkbox" v-model="shopData.checked"/></li>
        <li>商品名：{{ shopData.name }}</li>
        <li>商品价格：{{ shopData.price }}</li>
        <li>
            <button @click="shopData.number--" :disabled="shopData.number <= 0">-</button>
            <input type="number" min="0" max="99" name="" id="" v-model="shopData.number">
            <button @click="shopData.number++" :disabled="shopData.number >= 99">+</button>
        </li>
        <li>小计：{{ shopData.price * shopData.number }}</li>
    </ul>
</template>

<style scoped>
ul {
    min-width: 600px;
    list-style-type: none;
    display: flex;
    gap: 1rem;
}

li:nth-child(2) {
    width: 8rem;
}

li:nth-child(3) {
    width: 8rem;
}

button {
    padding: .1rem .3rem;
}
</style>